/* 
 *.filter类的样式规则，通常用于定义筛选相关的区域样式，比如筛选条件的容器等。
 * 设置内边距为10px，让内部元素与该容器边界有一定的间隔，使布局更美观。
 * 边框设置为1px宽的实线，颜色为#333（深灰色），用于给该区域添加一个可视化的边框，使其在页面中更清晰地呈现出来。
 * box-sizing: border-box规定了元素的盒模型计算方式，使得元素的宽度和高度包含了边框和内边距的值，避免因添加边框或内边距导致元素尺寸超出预期。
 * margin: 20px auto让该筛选区域在页面中上下有20px的外边距，并在水平方向上自动居中，使其处于合适的位置，与周边元素有合理的间隔。
 */
 .filter {
  padding: 10px;
  border: 1px solid #333;
  box-sizing: border-box;
  margin: 20px auto;
}

/* 
 * 选择.filter类下的.cateBox类元素的样式规则，一般用于分类筛选相关的内容布局，通过display: flex设置为弹性盒子布局，
 * 方便对其内部的子元素进行排列，比如水平排列不同的筛选分类等内容，同时设置顶部外边距为10px，使其与上方元素有一定间隔。
 */
.filter>.cateBox {
  display: flex;
  margin-top: 10px;
}

/* 
 * 选择.filter类下的.cateBox类元素内部的p标签元素的样式规则，通常用于显示筛选分类的标题等文本内容。
 * 设置宽度为80px，确定其在水平方向上占据的空间大小，使文本能有合适的显示宽度范围。
 * 通过text-align: right将文本内容右对齐，符合常见的标签与对应内容的布局习惯，看起来更整齐。
 * margin-right: 10px设置右边距为10px，与相邻的右侧元素拉开一定距离，避免过于紧凑。
 * line-height: 30px设置行高为30px，影响文本的垂直间距，使文字在垂直方向上排列更舒适、美观。
 */
.filter>.cateBox>p {
  width: 80px;
  text-align: right;
  margin-right: 10px;
  line-height: 30px;
}

/* 
 * 选择.filter类下的.cateBox类元素内部的ul无序列表元素的样式规则，用于展示具体的筛选选项列表等内容。
 * flex: 1让该无序列表元素能够自动占据剩余的可用空间，实现弹性布局下的自适应宽度分配，与同一行的其他元素合理分配空间。
 * 通过display: flex再次将其内部的子元素（通常是列表项li）设置为弹性盒子布局，方便对列表项进行排列操作。
 * flex-wrap: wrap规定当列表项排列不下时自动换行，确保所有选项都能合理展示出来，不会超出容器范围。
 */
.filter>.cateBox>ul {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

/* 
 * 选择.filter类下的.cateBox类元素内部的ul无序列表元素下的li列表项元素的样式规则，用于定义每个筛选选项的样式。
 * 设置内边距为上下3px、左右5px，让选项内容在水平和垂直方向上有一定的内部空间，显示更美观。
 * margin-right: 10px设置右边距为10px，使各个选项之间在水平方向有一定间隔，避免过于拥挤。
 * cursor: pointer将鼠标指针样式设置为手型，提示用户该选项是可以点击操作的，增强交互性。
 * margin-bottom: 10px设置底部外边距为10px，当列表项换行时，上下行之间也能有合适的间隔，使布局更整齐。
 */
.filter>.cateBox>ul>li {
  padding: 3px 5px;
  margin-right: 10px;
  cursor: pointer;
  margin-bottom: 10px;
}

/* 
 * 选择.filter类下的.cateBox类元素内部的ul无序列表元素下的li列表项元素，当具有.active类名或者鼠标悬停（:hover）时的样式规则。
 * 设置背景颜色为pink（粉色），通过改变背景色来突出显示当前选中或鼠标悬停的筛选选项，使其在视觉上与其他未选中选项区分开来。
 * 同时将文字颜色设置为白色（#fff），与粉色背景形成鲜明对比，保证文字的清晰可读性。
 */
.filter>.cateBox>ul>li.active,
.filter>.cateBox>ul>li:hover {
  background-color: pink;
  color: #fff;
}

/* 
 * 选择.filter类下的.cateBox类元素内部的.search类元素（可能是搜索框等）的样式规则，用于设置搜索相关输入框的样式。
 * 设置宽度为200px，确定其在水平方向上的尺寸大小，符合常见搜索框的宽度范围。
 * 通过padding-left: 20px添加左边距，让用户输入的内容与搜索框左边有一定间隔，方便查看输入内容。
 * 设置字体大小为20px，使搜索框内输入的文字以合适的字号显示，便于用户操作和查看。
 * 高度设置为30px，确定搜索框在垂直方向上的尺寸大小，整体保持合适的外观比例。
 */
.filter>.cateBox>.search {
  width: 200px;
  padding-left: 20px;
  font-size: 20px;
  height: 30px;
}

/* 
 *.pagination类的样式规则，通常用于定义分页相关的区域样式，比如分页导航栏等。
 * box-sizing: border-box同样是设置盒模型计算方式，确保元素尺寸包含边框和内边距，便于布局控制。
 * display: flex将该区域设置为弹性盒子布局，方便对内部的分页相关元素进行排列布局。
 * align-items: center让内部元素在垂直方向上居中对齐，使分页元素在垂直维度上排列整齐、美观。
 * height: 60px设置该分页区域的高度为60px，确定其在垂直方向上所占据的空间大小。
 * padding: 10px添加内边距，让内部的分页按钮、页码等元素与该区域边界有一定间隔，避免显得过于拥挤。
 * border: 1px solid #333添加1px宽的深灰色边框，使其在页面中有清晰的边界显示，便于区分。
 * font-size: 20px统一分页区域内文字的字号大小，保持整体风格一致，方便用户查看相关信息。
 */
.pagination {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 60px;
  padding: 10px;
  border: 1px solid #333;
  font-size: 20px;
}

/* 
 * 选择.pagination类元素内部的span标签元素的样式规则，一般用于表示分页的页码按钮等元素。
 * 设置内边距为上下5px、左右15px，让按钮在水平和垂直方向上有一定的内部空间，外观更饱满、美观。
 * 设置背景颜色为skyblue（天蓝色），通过独特的颜色突出显示页码按钮，吸引用户点击操作。
 * 文字颜色设置为白色（#fff），与背景色形成鲜明对比，保证文字清晰可读。
 * margin: 0 5px设置左右外边距为5px，让各个页码按钮之间有一定的间隔，避免过于紧凑，方便用户点击操作。
 * cursor: pointer将鼠标指针样式设置为手型，提示用户该元素是可点击的，增强交互性。
 */
.pagination>span {
  padding: 5px 15px;
  background-color: skyblue;
  color: #fff;
  margin: 0 5px;
  cursor: pointer;
}

/* 
 * 选择.pagination类元素内部的span标签元素，当具有.disable类名时的样式规则，通常用于表示不可用的页码按钮（比如超出范围等情况）。
 * 将文字颜色设置为#ccc（浅灰色），通过改变颜色使其呈现出不可用的视觉效果，与可用的页码按钮区分开来。
 * cursor: not-allowed将鼠标指针样式设置为禁止指针，提示用户该按钮当前不可点击操作，增强交互的直观性。
 */
.pagination>span.disable {
  color: #ccc;
  cursor: not-allowed;
}

/* 
 * 选择.pagination类元素内部的p标签元素的样式规则，可能用于显示一些分页相关的提示信息等内容。
 * margin: 0 10px设置左右外边距为10px，让该元素与相邻的分页元素（如页码按钮等）有一定间隔，布局更合理、美观。
 */
.pagination>p {
  margin: 0 10px;
}

/* 
 * 选择.pagination类元素内部的input输入框元素的样式规则，可能用于输入页码跳转等功能的输入框。
 * 设置高度为30px，确定输入框在垂直方向上的尺寸大小，符合常见输入框的高度范围，便于操作和查看。
 * text-align: center让输入框内输入的文字在水平方向上居中对齐，使显示更整齐美观。
 * 设置宽度为50px，确定其在水平方向上的尺寸大小，一般适合输入页码数字等简短内容。
 * font-size: 20px设置输入框内文字的字号大小，与分页区域整体文字风格保持一致，方便用户查看和操作。
 */
.pagination>input {
  height: 30px;
  text-align: center;
  width: 50px;
  font-size: 20px;
}

/* 
 * 选择.pagination类元素内部的button按钮元素的样式规则，可能用于分页相关的操作按钮（如跳转、刷新等）。
 * 设置内边距为左右0px、上下5px，让按钮在垂直方向有一定空间，外观更合适。
 * 高度设置为34px，确定按钮在垂直方向上的尺寸大小，使其在分页区域内有合适的比例和外观。
 * font-size: 20px设置按钮上文字的字号大小，与整体风格统一，便于用户查看操作按钮的功能提示。
 * margin-left: 10px设置左边距为10px，让按钮与左侧相邻元素有一定间隔，布局更合理。
 * cursor: pointer将鼠标指针样式设置为手型，提示用户该按钮是可点击操作的，增强交互性。
 */
.pagination>button {
  padding: 0 5px;
  height: 34px;
  font-size: 20px;
  margin-left: 10px;
  cursor: pointer;
}

/* 
 * 选择.pagination类元素内部的select下拉选择框元素的样式规则，可能用于选择每页显示的记录数量等功能。
 * 通过padding: 5px 10px 5px 20px添加内边距，让下拉选择框内部的选项内容与边框有一定间隔，显示更清晰美观，同时左边距稍大一些，方便查看选项内容。
 * font-size: 20px设置下拉选择框内文字的字号大小，与分页区域整体文字风格保持一致，便于用户查看和选择选项内容。
 * margin-left: 10px设置左边距为10px，让下拉选择框与左侧相邻元素有一定间隔，布局更合理。
 * cursor: pointer将鼠标指针样式设置为手型，提示用户该下拉选择框是可操作的，增强交互性。
 */
.pagination>select {
  padding: 5px 10px 5px 20px;
  font-size: 20px;
  margin-left: 10px;
  cursor: pointer;
}

/* 
 *.list类的样式规则，通常用于定义列表展示相关的区域样式，比如商品列表、文章列表等的容器样式。
 * 设置内边距为10px，让内部的列表项与该容器边界有一定间隔，使整体布局更美观、舒适。
 * 通过display: flex将该区域设置为弹性盒子布局，方便对内部的列表项进行排列布局操作。
 * flex-wrap: wrap规定当列表项排列不下时自动换行，确保所有列表项都能合理展示出来，不会超出容器范围。
 * justify-content: space-between让列表项在水平方向上均匀分布，两端对齐，使列表呈现出整齐、美观的布局效果，各个列表项之间有合适的间隔。
 */
.list {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* 
 * 选择.list类元素内部的li列表项元素的样式规则，用于定义每个列表项的具体样式，可能是单个商品、文章等的展示样式。
 * 设置宽度为290px，确定列表项在水平方向上的尺寸大小，使其有合适的展示宽度范围。
 * border: 1px solid #333添加1px宽的深灰色边框，让每个列表项有清晰的边界，便于区分和查看。
 * height: 470px设置列表项的高度为470px，确定其在垂直方向上所占据的空间大小，符合常见的展示内容所需的空间范围。
 * 通过display: flex将列表项内部元素设置为弹性盒子布局，方便对其内部的子元素（如图片、文字信息等）进行排列布局操作。
 * flex-direction: column指定内部元素按垂直方向排列，使内容从上到下依次展示，符合常见的布局习惯。
 * margin-bottom: 10px设置底部外边距为10px，让各个列表项之间在垂直方向有一定间隔，避免过于紧凑，布局更整齐。
 */
.list>li {
  width: 290px;
  border: 1px solid #333;
  height: 470px;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

/* 
 * 选择.list类元素内部的li列表项元素下的.show类元素（可能是用于展示图片、封面等内容的区域）的样式规则。
 * width: 100%让该展示区域占满整个列表项的宽度，确保展示内容能充分利用空间。
 * height: 290px设置展示区域的高度为290px，确定其在垂直方向上所占据的空间大小，符合常见的展示图片等内容的尺寸范围。
 * position: relative设置相对定位，方便后续其内部的绝对定位元素（如一些提示标签等）基于该区域进行定位布局。
 * pointer-events: none的作用是让该元素及其子元素不响应鼠标事件，比如鼠标点击、悬停等，通常用于在不影响交互的情况下覆盖在其他元素上展示某些内容等情况。
 */
.list>li>.show {
  width: 100%;
  height: 290px;
  position: relative;
  /* 表示鼠标穿透该元素 */
  pointer-events: none;
}

/* 
 * 选择.list类元素内部的li列表项元素下的.show类元素内部的img图片元素的样式规则，同样设置pointer-events: none，
 * 让图片元素也不响应鼠标事件，保持与父元素一致的交互特性，常用于一些特殊的展示布局场景中。
 */
.list>li>.show>img {
  pointer-events: none;
}

/* 
 * 选择.list类元素内部的li列表项元素下的.show类元素内部的span标签元素（可能是用于显示一些提示信息，如热门标签等）的样式规则。
 * position: absolute设置为绝对定位，使其能够脱离文档流，按照指定的位置进行摆放，相对于最近的已定位祖先元素（这里是.show类元素）来定位。
 * top: 0和right: 0将其定位在右上角的位置，方便展示一些重要的提示信息，让用户能快速看到。
 * 通过padding: 5px 10px添加内边距，让提示信息在水平和垂直方向上有一定的内部空间，显示更美观。
 * 设置背景颜色为orange（橙色），通过独特的颜色突出显示提示信息，使其在展示区域中比较醒目。
 * 文字颜色设置为白色（#fff），与背景色形成鲜明对比，保证文字清晰可读。
 * font-size: 14px设置提示信息文字的字号大小，相对较小但又能清晰展示，符合提示标签的常见字号范围。
 */
.list>li>.show>span {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px;
  background-color: orange;
  color: #fff;
  font-size: 14px;
}

/* 
 * 选择.list类元素内部的li列表项元素下的.show类元素内部的span标签元素，当具有.hot类名时（可能表示热门元素等特殊情况）的样式规则。
 * right: 60px重新设置其在水平方向上的位置，将其定位到距离右侧60px的位置，改变其显示位置，用于区分不同类型的提示信息。
 * background-color: red将背景颜色设置为红色，通过改变颜色进一步突出显示该特殊提示信息，吸引用户的注意力。
 */
.list>li>.show>span.hot {
  right: 60px;
  background-color: red;
}

/* 
 * 选择.list类元素内部的li列表